<template>
  <div class="store-container">
    <van-nav-bar>
      <template #left>
        <div class="navbar-left-text" @click="router.back()">租币商城</div>
      </template>
      <template #right>
        <div class="collect-btn">
          <van-icon name="ellipsis" size="20" />
          <van-icon style="margin-left: 15px" name="close" size="20" />
        </div>
      </template>
    </van-nav-bar>
    <div class="header">
      <img
        class="shading"
        src="@/assets/Combined shape 23 Copy@3x.png"
        alt=""
      />

      <div class="admin-info">
        <img class="admin-info-img" src="@/assets/bg.png" alt="" />
        <div class="admin-text">租币当钱花</div>
      </div>
      <div class="question">
        <img class="question-img" src="@/assets/question.png" alt="" />
        <span class="question-text">规则</span>
      </div>
      <div class="rentmoney">
        <span class="rentmoney-text">可用租币</span>
        <span class="rentmoney-num">1560</span>
      </div>
      <img class="zbbutton" src="@/assets/ZBbutton.png" alt="" />
      <div class="overflow-box">
        <div class="activity-card-list">
          <img class="activity-card" src="@/assets/activityCard.jpg" alt="" />
          <img class="activity-card" src="@/assets/activityCard.jpg" alt="" />
          <img class="activity-card" src="@/assets/activityCard.jpg" alt="" />
          <img class="activity-card" src="@/assets/activityCard.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="product-list">
      <div class="list-header">
        <div>
          <span class="exchange-mall">兑换商城</span>
          <img
            class="exchange-mall-img"
            src="@/assets/system-help@3x.png"
            alt=""
          />
        </div>
        <div>
          <span class="exchange-record">兑换记录</span>
          <img class="exchange-record-img" src="@/assets/right.png" alt="" />
        </div>
      </div>
      <div class="selector">
        <div
          class="select-item"
          :class="active === index ? 'active' : ''"
          v-for="(item, index) of renderSlectItem"
          :key="index"
          @click="changeActive(index)"
        >
          {{ item }}
        </div>
      </div>
      <div class="product-item">
        <CommodityCardStore
          v-for="(item, index) of randerderList"
          :key="index"
          :product="item"
        />
      </div>
      <div class="footer-btn" @click="viewMore">
        <div class="content">
          <span class="text">赚取更多租币</span>
          <img class="icon" src="@/assets/rightOrigin.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CommodityCardStore from './components/commodity-card-store.vue'
import { renderSlectItem, productList } from './init-data'
import { ProductItemType } from './init-data-types'
import { useRouter } from 'vue-router'
import { onUnmounted, ref } from 'vue'

const router = useRouter()
const active = ref<number>(0)
let randerderList = ref<ProductItemType[]>([...productList])

window.addEventListener('scroll', eventscorll)

onUnmounted(() => {
  window.removeEventListener('scroll', eventscorll)
})

function changeActive(index: number) {
  active.value = index
  switch (renderSlectItem[index]) {
    case '全部':
      randerderList.value = productList
      break
    case '1-100':
      randerderList.value = productList.filter((item) => item.goldNum <= 100)
      break
    case '100-500':
      randerderList.value = productList.filter(
        (item) => item.goldNum <= 500 && item.goldNum > 100,
      )
      break
    case '500-5000':
      randerderList.value = productList.filter(
        (item) => item.goldNum <= 5000 && item.goldNum > 500,
      )
      break
    case '5000以上':
      randerderList.value = productList.filter((item) => item.goldNum > 5000)
      break
    default:
      randerderList.value = productList
      break
  }
  renderSlectItem[index]
}

function eventscorll() {
  if (window.scrollY + window.innerHeight >= document.body.offsetHeight - 5) {
    viewMore()
  }
}

function viewMore() {
  productList.push(...productList)
  randerderList.value.push(...productList)
  // 调用筛选函数
  changeActive(active.value)
}
</script>

<style lang="scss" scoped>
.store-container {
  background-color: #e6e6e690;
}
.footer-btn {
  display: flex;
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  padding-bottom: 25px;
  .content {
    padding: 8px 9.5px;
    font-size: 14px;
    color: #ff6737;
    border: 1px solid rgba($color: #ff6737, $alpha: 0.3);
    border-radius: 50px;
    .icon {
      height: 10px;
      width: 10px;
      margin-left: 4px;
      display: inline-block;
    }
  }
}
.selector {
  overflow-x: auto;
  width: 100%;
  overflow: hidden;
  white-space: nowrap; 
  display: flex;
  .select-item {
    flex: 1;
    display: inline-block;
    text-align: center;
    white-space: nowrap;  
    margin: 0 4px;
    border-radius: 30px;
    border: 0.5px solid #e6e6e6;
    font-size: 12px;
    line-height: 22px;
    color: #999;
  }
  .active {
    margin-left: 8px;
    border-radius: 30px;
    background: rgba($color: #ff6737, $alpha: 0.1);
    border: none;
    font-size: 12px;
    line-height: 22px;
    color: #ff6737;
  }
}
.product-list {
  margin-top: 63px;
  border-radius: 20px 20px 0 0;
  background: #f7f8f9;
  z-index: 500;
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20.5px 15px;
    .exchange-mall {
      font-size: 16px;
      line-height: 16px;
      color: #222;
    }
    .exchange-mall-img {
      display: inline-block;
      margin-left: 4px;
      width: 15px;
      height: 15px;
    }
    .exchange-record {
      font-size: 14px;
      line-height: 14px;
      color: #999;
    }
    .exchange-record-img {
      display: inline-block;
      margin-left: 4px;
      height: 10px;
      width: 10px;
    }
  }
}
.overflow-box {
  position: absolute;
  transform: translateY(50%);
  bottom: 0px;
  width: 100%;
  overflow: hidden;
}
.activity-card-list {
  text-align: center;
  white-space: nowrap;
  overflow-y: hidden;
  display: flex;
  width: 100%;
  overflow-x: scroll;
  padding-left: 15px;
  box-shadow: 0 10px 10px 0 rgba($color: #bbd3ca, $alpha: 0.2);
  :last-child {
    margin-right: 0px !important;
    padding-right: 30px;
  }
  .activity-card {
    width: 134px;
    height: 68.5px;
    margin-right: 10px;
    white-space: nowrap;
    display: inline-block;
    background-size: cover;
    border-radius: 7px;
    box-shadow: 0 10px 10px 0 rgba($color: #bbd3ca, $alpha: 0.2);
  }
}
.rentmoney {
  color: #fff;
  position: absolute;
  top: 47px;
  left: 15px;
  .rentmoney-text {
    font-size: 12px;
    margin-left: 3px;
  }
  .rentmoney-num {
    display: block;
    font-size: 40px;
    line-height: 40px;
    font-weight: bold;
  }
}
.zbbutton {
  position: absolute;
  top: 64px;
  right: 5px;
  width: 130px;
  height: 56px;
}
.question {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15px;
  right: 15px;
  .question-text {
    font-size: 13px;
    margin-left: 5px;
    color: #fff;
  }
  .question-img {
    width: 14px;
  }
}
.admin-info {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 15px;
  padding-top: 10px;
  .admin-info-img {
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
  }
  .admin-text {
    display: inline-block;
    font-size: 12px;
    background: rgba($color: #ffffff, $alpha: 0.1043);
    padding: 4px 5px;
    color: #ffffff;
    border-radius: 1px;
    margin-left: 8px;
  }
}
.header {
  height: 160px;
  background: linear-gradient(90deg, #ff8a3c, #ff611c);
  border-radius: 0 0 0 20px;
  position: relative;
  .shading {
    position: absolute;
    left: 60px;
    top: 67.5px;
    width: 120px;
    height: 105px;
  }
}
.navbar-left-text {
  font-size: 18px;
  line-height: 19px;
  color: #000;
  font-weight: 500;
}
.collect-btn {
  margin-left: 5px;
  padding: 3px 12px;
  border-radius: 50px;
  border: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--van-nav-bar-icon-color);
}
</style>
